<template>
  <div class="firstPayment">
    <el-form
      :inline="true"
      label-width="90px"
      :model="formData"
      ref="formData"
      :rules="formDataRules"
    >
      <div class="maintitle">首付款拨付</div>
      <div class="formcontent">
        <el-form-item label="经办人员" prop="transactor">
          <el-input :disabled="disabled" v-model="formData.transactor" style="width:200px;"></el-input>
        </el-form-item>
        <el-form-item label="中标金额" prop="bidAmount">
          <el-input :disabled="disabled" v-model="formData.bidAmount" style="width:200px;">
            <i slot="suffix">万元</i>
          </el-input>
        </el-form-item>
        <el-form-item label="申请首付款拨金额" label-width="130px" prop="applyAmount">
          <el-input :disabled="disabled" style="width:200px;" v-model="formData.applyAmount">
            <i slot="suffix">万元</i>
          </el-input>
        </el-form-item>
        <el-form-item label="付款时间" prop="paymentTime">
          <el-date-picker
            :disabled="disabled"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="formData.paymentTime"
          ></el-date-picker>
        </el-form-item>
        <div>
          <el-form-item label="拨款申请" prop="applyFileId">
            <el-upload
              v-if="!disabled"
              class="upload-demo"
              :action="$config.uploadUrl"
              accept=".pdf"
              :limit="1"
              :before-upload="uploadBefore"
              :on-success="uploadReply"
              :file-list="fileList[0]"
              :disabled="disabled"
            >
              <el-button v-if="!disabled" size="small">上传</el-button>
              <!-- <el-button @click="seePdf(0)" v-if="disabled" size="small">查看</el-button> -->
            </el-upload>
            <seeFujianForList
              v-if="disabled && fileList[0]"
              @openPdf="seePdf"
              :file-obj="fileList[0]"
              :file-num="0"
            />
          </el-form-item>
          <el-form-item
            label="已完成工作量"
            label-width="100px"
            style="margin:0 30px;"
            prop="workDoneFileId"
          >
            <el-upload
              v-if="!disabled"
              class="upload-demo"
              :action="$config.uploadUrl"
              accept=".pdf"
              :limit="1"
              :before-upload="uploadBefore"
              :on-success="uploadCompleted"
              :file-list="fileList[1]"
              :disabled="disabled"
            >
              <el-button v-if="!disabled" size="small">上传</el-button>
              <!-- <el-button @click="seePdf(1)" v-if="disabled" size="small">查看</el-button> -->
            </el-upload>
            <seeFujianForList
              v-if="disabled && fileList[1]"
              @openPdf="seePdf"
              :file-obj="fileList[1]"
              :file-num="1"
            />
          </el-form-item>
          <el-form-item label="拨款建议书" prop="proposalFileId">
            <el-upload
              v-if="!disabled"
              class="upload-demo"
              :action="$config.uploadUrl"
              accept=".pdf"
              :limit="1"
              :before-upload="uploadBefore"
              :on-success="uploadProposal"
              :file-list="fileList[2]"
              :disabled="disabled"
            >
              <el-button v-if="!disabled" size="small">上传</el-button>
              <!-- <el-button @click="seePdf(2)" v-if="disabled" size="small">查看</el-button> -->
            </el-upload>
            <seeFujianForList
              v-if="disabled && fileList[2]"
              @openPdf="seePdf"
              :file-obj="fileList[2]"
              :file-num="2"
            />
          </el-form-item>
        </div>
      </div>
      <div class="maintitle" style="margin:20px 0;" v-if="disbursementArray.length > 0">进度款拨付</div>
      <div class="moneyDisbursement" v-for="(item, index) in disbursementArray" :key="index">
        <el-form-item label="经办人员" prop="name">
          <el-input :disabled="disabled" v-model="item.transactor" style="width:200px;"></el-input>
        </el-form-item>
        <el-form-item label="付款时间" label-width="130px">
          <el-date-picker
            :disabled="disabled"
            style="width:200px;"
            v-model="item.paymentTime"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <div>
          <el-form-item label="中标金额">
            <el-input :disabled="disabled" style="width:200px;" v-model="item.bidAmount">
              <i slot="suffix">万元</i>
            </el-input>
          </el-form-item>
          <el-form-item label="累计拨付金额" label-width="130px">
            <el-input :disabled="disabled" style="width:200px;" v-model="item.cumulativePayment">
              <i slot="suffix">万元</i>
            </el-input>
          </el-form-item>
          <el-form-item label="申请进度款拨金额" label-width="130px">
            <el-input :disabled="disabled" style="width:200px;" v-model="item.applyAmount">
              <i slot="suffix">万元</i>
            </el-input>
          </el-form-item>
        </div>

        <div>
          <el-form-item label="拨款申请">
            <!-- <el-upload
              class="upload-demo"
              action="/pc/file/upload"
              :limit="1"
              :before-upload="uploadBefore"
              :on-success="uploadGrant"
              :file-list="item.fileList[index][0]"
              :disabled="disabled"
            >
              <el-button @click="seePdf1(item,index,0)" size="small">查看</el-button>
            </el-upload>-->
            <seeFujianForList
              v-if="disabled && item.fileList[index][0]"
              @openPdf="seePdf1"
              :file-obj="item.fileList[index][0]"
              :file-index="index"
              :file-num="0"
            />
          </el-form-item>
          <el-form-item label="已完成工作量" label-width="100px" style="margin:0 30px;">
            <!-- <el-upload
              class="upload-demo"
              action="/pc/file/upload"
              :limit="1"
              :before-upload="uploadBefore"
              :on-success="uploadCompleted_1"
              :file-list="item.fileList[index][1]"
              :disabled="disabled"
            >
              <el-button @click="seePdf1(item,index,1)" size="small">查看</el-button>
            </el-upload>-->
            <seeFujianForList
              v-if="disabled && item.fileList[index][1]"
              @openPdf="seePdf1"
              :file-obj="item.fileList[index][1]"
              :file-index="index"
              :file-num="1"
            />
          </el-form-item>
          <el-form-item label="拨款建议书">
            <!-- <el-upload
              class="upload-demo"
              action="/pc/file/upload"
              :limit="1"
              :before-upload="uploadBefore"
              :on-success="uploadProposal_1"
              :file-list="item.fileList[index][2]"
              :disabled="disabled"
            >
              <el-button @click="seePdf1(item,index,2)" size="small">查看</el-button>
            </el-upload>-->
            <seeFujianForList
              v-if="disabled && item.fileList[index][2]"
              @openPdf="seePdf1"
              :file-obj="item.fileList[index][2]"
              :file-index="index"
              :file-num="2"
            />
          </el-form-item>
          <el-form-item label="进度拨付核查报告" label-width="140px">
            <!-- <el-upload
              class="upload-demo"
              action="/pc/file/upload"
              :limit="1"
              :before-upload="uploadBefore"
              :on-success="uploadReport"
              :file-list="item.fileList[index][3]"
              :disabled="disabled"
            >
              <el-button @click="seePdf1(item,index,3)" size="small">查看</el-button>
            </el-upload>-->
            <seeFujianForList
              v-if="disabled && item.fileList[index][3]"
              @openPdf="seePdf1"
              :file-obj="item.fileList[index][3]"
              :file-index="index"
              :file-num="3"
            />
          </el-form-item>
        </div>
      </div>

      <el-dialog
        :close-on-click-modal="false"
        title="进度款拨付"
        :visible.sync="dialogVisible"
        width="70%"
        :before-close="handleClose"
        center
      >
        <el-form>
          <div class="moneyDisbursement">
            <el-form-item label="经办人员" prop="name">
              <el-input v-model="formData_1.transactor" style="width:200px;"></el-input>
            </el-form-item>
            <el-form-item label="付款时间" label-width="130px">
              <el-date-picker
                style="width:200px;"
                v-model="formData_1.paymentTime"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>
            <div>
              <el-form-item label="中标金额">
                <el-input style="width:200px;" v-model="formData_1.bidAmount">
                  <i slot="suffix">万元</i>
                </el-input>
              </el-form-item>
              <el-form-item label="累计拨付金额" label-width="130px">
                <el-input style="width:200px;" v-model="formData_1.cumulativePayment">
                  <i slot="suffix">万元</i>
                </el-input>
              </el-form-item>
              <el-form-item label="申请进度款拨金额" label-width="130px">
                <el-input style="width:200px;" v-model="formData_1.applyAmount">
                  <i slot="suffix">万元</i>
                </el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="拨款申请">
                <el-upload
                  class="upload-demo"
                  :action="uploadUrl"
                  :limit="1"
                  :before-upload="uploadBefore"
                  :on-success="uploadGrant"
                  :file-list="fileList_1[0]"
                  accept=".pdf"
                >
                  <el-button size="small">上传</el-button>
                </el-upload>
              </el-form-item>
              <el-form-item label="已完成工作量" label-width="100px" style="margin:0 30px;">
                <el-upload
                  class="upload-demo"
                  :action="uploadUrl"
                  :limit="1"
                  :before-upload="uploadBefore"
                  :on-success="uploadCompleted_1"
                  :file-list="fileList_1[1]"
                  accept=".pdf"
                >
                  <el-button size="small">上传</el-button>
                </el-upload>
              </el-form-item>
              <el-form-item label="拨款建议书">
                <el-upload
                  class="upload-demo"
                  :action="uploadUrl"
                  :limit="1"
                  :before-upload="uploadBefore"
                  :on-success="uploadProposal_1"
                  :file-list="fileList_1[2]"
                  accept=".pdf"
                >
                  <el-button size="small">上传</el-button>
                </el-upload>
              </el-form-item>
              <el-form-item label="进度拨付核查报告" label-width="140px">
                <el-upload
                  class="upload-demo"
                  :action="uploadUrl"
                  :limit="1"
                  :before-upload="uploadBefore"
                  :on-success="uploadReport"
                  :file-list="fileList_1[3]"
                  accept=".pdf"
                >
                  <el-button size="small">上传</el-button>
                </el-upload>
              </el-form-item>
            </div>
          </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onPayment">确 定</el-button>
        </span>
      </el-dialog>
      <div class="btn">
        <el-button v-if="!disabled" type="primary" @click="onSubmit">提交</el-button>
        <el-button type="primary" v-if="disabled" @click="dialogVisible = true">添加进度款拨付</el-button>
        <el-button @click="back">返回</el-button>
      </div>
    </el-form>
    <el-dialog :close-on-click-modal="false" :title="pdfName" :visible.sync="pdfFlag" width="50%">
      <div class="pdfBox">
        <iframe :src="$https + pdfUrl" style="width:100%;height:600px;" frameborder="0"></iframe>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPayAdvance,
  onPayAdvance,
  onMakePayment,
  getMakePayment
} from "@/api/project1/projectOrganization/firstPayment";
import {
  validateNotNull,
  validateDatetime,
  validateUpload
} from "@/utils/validate.js";
import seeFujianForList from "@/components/seeFujianForList";
export default {
  components: {
    seeFujianForList
  },
  data() {
    return {
      uploadUrl: this.$config.uploadUrl,
      formData: {
        //首付款提交
        projectId: localStorage.getItem("projectId"),
        transactor: null, //经办人
        bidAmount: null, //中标金额(万元)
        applyAmount: null, //申请首付款拨金额(万元)
        paymentTime: null, //付款时间
        applyFileId: null, //拨款申请文件ID
        workDoneFileId: null, //已完成工程量文件ID
        proposalFileId: null //拨款建议书文件ID
      },
      formDataRules: {
        transactor: [{ validator: validateNotNull, trigger: "blur" }],
        bidAmount: [{ validator: validateNotNull, trigger: "blur" }],
        applyAmount: [{ validator: validateNotNull, trigger: "blur" }],
        paymentTime: [{ validator: validateDatetime, trigger: "change" }],
        applyFileId: [{ validator: validateUpload }],
        workDoneFileId: [{ validator: validateUpload }],
        proposalFileId: [{ validator: validateUpload }]
      },
      formData_1: {
        downPaymentId: null, //首付款id
        projectId: localStorage.getItem("projectId"),
        transactor: null, //经办人员
        bidAmount: null, //中标金额(万元)
        cumulativePayment: null, //累计拨款金额(万元)
        paymentTime: null, //付款时间
        applyAmount: null, //申请进度款拨金额(万元)
        applyFileId: null, //拨款申请文件ID
        workDoneFileId: null, //已完成工程量
        proposalFileId: null, //拨款建议书
        checkReportFileId: null //进度拨付核查报告
      }, //进度款拨付提交
      fileList: [], //提交首付款上传文件回显列表
      fileList_1: [], //新增进度款拨付数据上传文件回显列表
      schedule: false, //添加进度款拨付按钮状态
      dialogVisible: false, //弹出框状态
      disbursementArray: [], //拨付款回显
      projectId: localStorage.getItem("projectId") || "",
      disabled: true,
      pdfUrl: "",
      pdfFlag: false,
      pdfName: ""
    };
  },
  created() {
    if (this.$route.name === localStorage.getItem("key")) {
      this.disabled = false;
    }
    if (localStorage.getItem("lookStatus") == 2) {
      this.disabled = true;
    }
    //执行
    this.getDetail();
  },
  methods: {
    back() {
      this.$router.push("/projectManagement/projectImplementation/dealwith");
    },
    //查看当前pdf2
    seePdf1(index, num) {
      this.pdfFlag = true;
      this.pdfUrl = this.disbursementArray[index].fileList[index][num][0].url;
      this.pdfName = this.disbursementArray[index].fileList[index][num][0].name;
      console.log(this.disbursementArray);
    },
    //查看当前PDF
    seePdf(num) {
      this.pdfFlag = true;
      this.pdfUrl = this.fileList[num][0].url;
      this.pdfName = this.fileList[num][0].name;
    },
    //获取详情
    getDetail: function() {
      getPayAdvance({ projectId: this.projectId }).then(res => {
        if (res.code == 1000) {
          if (res.data) {
            this.schedule = true;
            this.formData = res.data;
            this.fileList.push(
              [
                {
                  name: this.formData.applyFileInfo.fileName,
                  url: this.formData.applyFileInfo.filePath
                }
              ],
              [
                {
                  name: this.formData.workDoneFileInfo.fileName,
                  url: this.formData.workDoneFileInfo.filePath
                }
              ],
              [
                {
                  name: this.formData.proposalFileInfo.fileName,
                  url: this.formData.proposalFileInfo.filePath
                }
              ]
            );
            console.log(this.fileList);
          }
        }
      });
      getMakePayment({ projectId: this.projectId }).then(res => {
        if (res.code == 1000) {
          if (res.data) {
            var resData = res.data.rows;

            var arr = [];
            for (let i = 0; i < resData.length; i++) {
              arr.push([
                [
                  {
                    name: resData[i].applyFileInfo.fileName,
                    url: resData[i].applyFileInfo.filePath
                  }
                ],
                [
                  {
                    name: resData[i].workDoneFileInfo.fileName,
                    url: resData[i].workDoneFileInfo.filePath
                  }
                ],
                [
                  {
                    name: resData[i].proposalFileInfo.fileName,
                    url: resData[i].proposalFileInfo.filePath
                  }
                ],
                [
                  {
                    name: resData[i].checkReportFileInfo.fileName,
                    url: resData[i].checkReportFileInfo.filePath
                  }
                ]
              ]);
              resData[i]["fileList"] = arr;
            }
            this.disbursementArray = resData;
            console.log(this.disbursementArray, "进度款");
          }
        }
      });
    },
    //文件提交前
    uploadBefore: function(file) {
      var isTpye = file.name.substring(file.name.lastIndexOf(".") + 1);
      if (isTpye != "pdf") {
        this.$message({
          showClose: true,
          message: "上传文件只能是pdf格式!",
          type: "error"
        });
        return false;
      }
    },
    //文件提交成功(拨款申请文件)
    uploadReply: function(res) {
      if (res.code == 1000) {
        this.formData.applyFileId = res.data.id;
      }
    },
    //文件提交成功(已完成工程量文件)
    uploadCompleted: function(res) {
      if (res.code == 1000) {
        this.formData.workDoneFileId = res.data.id;
      }
    },
    //文件提交成功(拨款建议书文件)
    uploadProposal: function(res) {
      if (res.code == 1000) {
        this.formData.proposalFileId = res.data.id;
      }
    },
    //文件提交成功(拨款申请)
    uploadGrant: function(res) {
      if (res.code == 1000) {
        this.formData_1.applyFileId = res.data.id;
      }
    },
    //文件提交成功(已完成工作量)
    uploadCompleted_1: function(res) {
      if (res.code == 1000) {
        this.formData_1.workDoneFileId = res.data.id;
      }
    },
    //文件提交成功(拨款建议书)
    uploadProposal_1: function(res) {
      if (res.code == 1000) {
        this.formData_1.proposalFileId = res.data.id;
      }
    },
    //文件提交成功(进度拨付核查报告)
    uploadReport: function(res) {
      if (res.code == 1000) {
        this.formData_1.checkReportFileId = res.data.id;
      }
    },

    //弹出框
    handleClose(done) {
      done();
    },
    //弹出框进度款提交
    onPayment() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      this.formData_1.downPaymentId = this.formData.id; //首付款id
      return;
      console.log(this.formData_1);
      onMakePayment(this.formData_1)
        .then(res => {
          loading.close();
          this.$message({
            message: "提交成功",
            type: "success"
          });
          this.dialogVisible = false; //关闭当前弹窗
          this.getDetail(); //提交后刷新值
          // this.$router.push(
          //   "/projectManagement/projectImplementation/dealwith"
          // );
        })
        .catch(err => {
          loading.close();
        });
    },
    //提交
    onSubmit: function() {
      this.$refs["formData"].validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          onPayAdvance(this.formData)
            .then(res => {
              loading.close();
              this.$message({
                message: "提交成功",
                type: "success"
              });
              this.$router.push(
                "/projectManagement/projectImplementation/dealwith"
              );
              this.getDetail(); //提交后刷新值
              this.schedule = true;
              this.disabled = true;
            })
            .catch(err => {
              loading.close();
            });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.firstPayment {
  padding: 20px;
  min-height: calc(100vh - 154px);
  background-color: #fff;
  .maintitle {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 25px;
    color: #4d4d4d;
  }
  .formcontent {
    margin-top: 30px;
  }
}
.moneyDisbursement {
  margin-bottom: 20px;
  padding: 20px 0 0 0;
  background: #fafafa;
}
</style>
